<template>
	<view
		class="chat-emoji"
		:class="[
			{
				'is-show': visible
			}
		]"
	>
		<scroll-view scroll-y class="scroller">
			<cl-row>
				<cl-col :span="4" v-for="(item, index) in list" :key="index">
					<view class="block" @click="clickEmoji(item)">
						<image :src="item" />
					</view>
				</cl-col>
			</cl-row>
		</scroll-view>
	</view>
</template>

<script>
const emojiList = [
	'angry-face.png',
	'anguished-face.png',
	'astonished-face.png',
	'confounded-face.png',
	'confused-face.png',
	'crying-face.png',
	'disappointed-but-relieved-face.png',
	'disappointed-face.png',
	'dizzy-face.png',
	'drooling-face.png',
	'expressionless-face.png',
	'face-savouring-delicious-food.png',
	'face-screaming-in-fear.png',
	'face-throwing-a-kiss.png',
	'face-with-cold-sweat.png',
	'face-with-cowboy-hat.png',
	'face-with-finger-covering-closed-lips.png',
	'face-with-head-bandage.png',
	'face-with-look-of-triumph.png',
	'face-with-medical-mask.png',
	'face-with-monocle.png',
	'face-with-one-eyebrow-raised.png',
	'face-with-open-mouth-and-cold-sweat.png',
	'face-with-open-mouth-vomiting.png',
	'face-with-open-mouth.png',
	'face-with-party-horn-and-party-hat.png',
	'face-with-pleading-eyes.png',
	'face-with-rolling-eyes.png',
	'face-with-stuck-out-tongue-and-tightly-closed-eyes.png',
	'face-with-stuck-out-tongue-and-winking-eye.png',
	'face-with-stuck-out-tongue.png',
	'face-with-thermometer.png',
	'face-with-uneven-eyes-and-wavy-mouth.png',
	'face-without-mouth.png',
	'fearful-face.png',
	'flushed-face.png',
	'freezing-face.png',
	'frowning-face-with-open-mouth.png',
	'grimacing-face.png',
	'grinning-face-with-one-large-and-one-small-eye.png',
	'grinning-face-with-smiling-eyes.png',
	'grinning-face-with-star-eyes.png',
	'grinning-face.png',
	'hugging-face.png',
	'hushed-face.png',
	'imp.png',
	'kissing-face-with-closed-eyes.png',
	'kissing-face-with-smiling-eyes.png',
	'kissing-face.png',
	'loudly-crying-face.png',
	'lying-face.png',
	'money-mouth-face.png',
	'nauseated-face.png',
	'nerd-face.png',
	'neutral-face.png',
	'overheated-face.png',
	'pensive-face.png',
	'persevering-face.png',
	'pouting-face.png',
	'relieved-face.png',
	'rolling-on-the-floor-laughing.png',
	'serious-face-with-symbols-covering-mouth.png',
	'shocked-face-with-exploding-head.png',
	'sleeping-face.png',
	'sleepy-face.png',
	'slightly-frowning-face.png',
	'slightly-smiling-face.png',
	'smiling-face-with-halo.png',
	'smiling-face-with-heart-shaped-eyes.png',
	'smiling-face-with-horns.png',
	'smiling-face-with-open-mouth-and-smiling-eyes.png',
	'smiling-face-with-open-mouth-and-tightly-closed-eyes.png',
	'smiling-face-with-open-mouth.png',
	'smiling-face-with-smiling-eyes-and-hand-covering-mouth.png',
	'smiling-face-with-smiling-eyes-and-three-hearts.png',
	'smiling-face-with-smiling-eyes.png',
	'smiling-face-with-sunglasses.png',
	'smirking-face.png',
	'sneezing-face.png',
	'thinking-face.png',
	'tired-face.png',
	'upside-down-face.png',
	'weary-face.png',
	'white-frowning-face.png',
	'white-smiling-face.png',
	'winking-face.png',
	'worried-face.png',
	'zipper-mouth-face.png'
].map(e => {
	return global.baseUrl+`/images/chat/${e}`;
});

export default {
	props: {
		visible: Boolean
	},

	data() {
		return {
			list: emojiList
		};
	},
	methods:{
		clickEmoji(item){
			this.$emit('clickEmoji',item)
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-emoji {
	height: 0;
	box-sizing: border-box;
	transition: height 0.3s;

	&.is-show {
		height: 400rpx;
		padding: 10rpx 0 0 0;
	}

	.scroller {
		height: 100%;

		.block {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			height: 100rpx;

			&:active {
				background-color: #f7f7f7;
			}

			image {
				display: inline-block;
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
}
</style>
